<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
    <title>Kanban | CoCreate</title>
  
    <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" data-parse="true"/>

  </head>

  <body>
    <div id="modal-viewport" class="hidden"></div>
    <div class="nav display:flex align-items:center background:whitesmoke" 
      data-main_content_id="content"
      data-scroll_effect="hide-nav"
      data-scroll_up="1" 
      data-scroll_down="1">

      <!-- Horizontal Scroll Nav/Tabs -->
      <ul class="overflow:overlay display:inline-flex direction:rtl font-size:20px align-items:center list-style-type:none width:100% height:50px">
  			
  			<!-- Modal Controls -->
  			<li class="margin-right:15px">
  			  <a class="btn-modal-close"><i class="fas fa-times"></i></a>
  			</li>
  			<li class="margin-right:15px"><a class="btn-modal-maximize"><i data-transform_to="far fa-window-restore" class="far fa-window-maximize">
  			  </i></a>
  			</li>
  			<li class="margin-right:15px"><a class="btn-modal-minimize"><i class="far fa-window-minimize">
  			  </i></a>
  			</li>
  			
  			<!-- fullscreen toogle and icon transform-->
  			<li class="margin-right:15px">
  			  <a data-fullscreen><i data-transform_to="fas fa-compress" class="fas fa-expand"></i></a>
  			</li>
  		
  			<!-- delete document-->
  			<li class="margin-right:15px">
  			  <a data-collection="modules" data-module_id="" data-pass_id="form-fields" class="btn-modal-close" data-actions="deleteDocument"><i class="far fa-trash-alt"></i></a>
  			</li>
      </ul>
    </div>
		<div data-main_content_id="content">
    
      <div id="board" class="display:flex overflow:overlay height:90vh">
        
        <div class="display:flex flex-wrap:nowrap flex-direction:row sortable" data-group_name="stage"
          data-fetch_collection="module_activity"
          data-filter_name="module_id" 
          data-filter_value="5e6d79f9d8cdbe53927a0443"
          data-filter_operator="$eq"
          data-fetch_count=""
          data-order_by="stage_position"
          data-order_type="asc"
          data-template_id="filter_test"
          data-render_id="stage"
          data-pass_id="fetch_value"
          data-droppable="true">
           
          <!-- Stage Column -->
          <div class="template margin:10px background:whitesmoke max-width:300px" 
              data-template_id="filter_test" 
              data-element_id="{{stage._id}}"
              data-document_id="{{stage._id}}">
            <div class="margin:15px font-size:18px color-dark-gray">
                <span class="display:inline-block">
                  <input class="input_field"
                    data-collection="module_activity" 
                    data-document_id="{{stage._id}}" 
                    name="name" 
                    id="stage-name"  
                    placeholder="Stage">
                </span>
                <span class="float:right display:inline-block">
                  <a data-clone_id="stage" data-actions="deleteDocument" data-collection="module_activity" data-document_id="{{stage._id}}"><i class="fas fa-times"></i></a>
                </span>
            </div>
            <div class="height:70vh padding:10px overflow:auto">
            
              <div class="display:flex flex-direction:column height:100% sortable" 
                data-group_name="card" 
                data-fetch_collection="module_activity"
                data-filter_name="stage"
                data-filter_value="{{stage._id}}"
                data-filter_operator="$eq"
                data-fetch_count=""
                data-order_by="stage-index_position"
                data-order_type="asc"
                data-template_id="{{stage._id}}">

                <!-- Card -->
                  <div class="template card margin-bottom:10px padding:10px background:white" data-template_id="{{stage._id}}" data-value="{{data._id}}" data-document_id="{{data._id}}">
                    <div class="width:100%">
                      <img data-collection="module_activity" data-document_id="{{data._id}}" name="image" src="https://via.placeholder.com/150" width="100%"></img>
                    </div>
                    <div class="border-bottom:1px_solid_gray margin:0px_15px">
                      <div class="display:flex margin:10px_0px">
                        <span class="cocreate-badge round badge-danger margin-right:10px font-size:10px padding:0px_20px"></span>
                        <span class="cocreate-badge round margin-right:10px font-size:10px padding:0px_20px"></span>
                      </div>
                      <p data-collection="module_activity" data-document_id="{{data._id}}" name="name">Card Name</p>
                      <div class="display:flex margin:10px_0px">
                        <span class="cocreate-badge badge-danger margin-right:10px font-size:14px">
                            <i class="far fa-clock"></i>
                            <span>Aug 29th 17</span>
                        </span>
                        <span class="cocreate-badge margin-right:10px font-size:14px">
                            <i class="far fa-check-circle"></i>
                            <span>2/7</span>
                        </span>
                      </div>
                      <div class="display:flex">
              			 
                			 <!-- Avatar -->
                      <div class="avatar-wrapper margin:5px_0px margin-right:10px">
              				  <a class="avatar round" data-window_url="render.html" data-pass_collection="modules" data-pass_prefix="" data-pass_module_id="5dd010bccbc25f0cdb1a4d9f" data-pass_to="render" data-window_width="300px" data-window_height="375px" data-window_color="#229954">
                  				<span data-collection="users" data-module_id="" name="name" class="sessionUser_Id first-letter avatar-name">B</span>
                  				<span data-collection="users" data-module_id="" name="profile_image" class="sessionUser_Id avatar-image">
                  				  <img src="/_static/Velazquez.jpg" onerror="this.style.display='none'"/>
                  				</span>
                  			</a>
                          <div class="avatar-status off"></div>
                      </div>
                  
                      <!-- Avatar -->
                      <div class="avatar-wrapper margin:5px_0px margin-right:10px">
              				  <a class="avatar round" data-window_url="render.html" data-pass_collection="modules" data-pass_prefix="" data-pass_module_id="5dd010bccbc25f0cdb1a4d9f" data-pass_to="render" data-window_width="300px" data-window_height="375px" data-window_color="#229954">
                  				<span data-collection="users" data-module_id="" name="name" class="sessionUser_Id first-letter avatar-name">B</span>
                  				<span data-collection="users" data-module_id="" name="profile_image" class="sessionUser_Id avatar-image">
                  				  <img src="/_static/Velazquez.jpg" onerror="this.style.display='none'"/>
                  				</span>
                  			</a>
                          <div class="avatar-status off"></div>
                      </div>
                  
                    </div>
                  </div>
                  <div class="display:flex margin:15px">
                    <span class="float:left"><i class="fas fa-eye"></i></span>
                    <div class="display:flex float:right">
                        <span class="margin-left:10px"><i class="far fa-sticky-note"></i><span>0</span></span>
                        <span class="margin-left:10px"><i class="far fa-envelope"></i><span>8</span></span>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
            <div class="margin:0px_15px padding:15px_0px">
              <!--<a data-clone_id="{{stage._id}}-card" data-actions="createClone" data-clone_name="card-name"><i class="fas fa-plus"></i> New Card</a>-->
             	<form data-collection="module_activity">
               	<input type="hidden" data-document_id="" name="stage" value="{{stage._id}}"/>
               	<a data-actions="createDocument"><i class="fas fa-plus"></i> New Card</a>
             	</form>
            </div>
          </div>
  
     		</div>
     	</div>
     	
     	<form data-collection="module_activity">
       	<input type="hidden" data-pass_id="module_id" data-document_id="" name="module_id" value="5e6d79f9d8cdbe53927a0443"/>
       	<button class="position:fixed bottom:15px right:15px background:dodgerblue border-radius:50% grow-hover" data-actions="createDocument">
       	  <i class="fas fa-plus"></i>
       	</button>
     	</form>
  
   	</div>
  
    <script>
      var config = {
        apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
        organization_Id: '5de0387b12e200ea63204d6c'
      }
    </script>
  
    <!--CoCreateJS-->
    
  
    <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>-->
    <script src="https://server.cocreate.app/CoCreateJS/dist/CoCreate.js"></script>
  

  </body>
</html>